import QtQuick
import QtQuick.Layouts
import Fk.RoomElement

ColumnLayout {
  id: root
  anchors.fill: parent
  property var extra_data: ({ name: "", data: {
    trick: [],
    shown_trick: [],
    equip: [],
  } })
  signal finish()

  BigGlowText {
    Layout.fillWidth: true
    Layout.preferredHeight: childrenRect.height + 4

    text: "指令点 " + extra_data.data.mp + "/" + extra_data.data.maxMp
  }

  ColumnLayout {
    Layout.preferredWidth: root.width - root.width % 97
    Layout.fillHeight: true
    Layout.alignment: Qt.AlignHCenter

    RowLayout {
      Rectangle {
        color: "#6B5D42"
        width: 20
        height: 120
        radius: 5

        Text {
          anchors.fill: parent
          width: 20
          height: 120
          text: "方案区"
          color: "#CBC3E3"
          font.family: fontLibian.name
          font.pixelSize: 18
          style: Text.Outline
          wrapMode: Text.WordWrap
          verticalAlignment: Text.AlignVCenter
          horizontalAlignment: Text.AlignHCenter
        }
      }
      Repeater {
        model: extra_data.data.trick
        Rectangle {
          color: "#1D1E19"
          width: 97
          height: 134
          CardItem {
            anchors.centerIn: parent
            Image {
              source: "image/card/card-back.png"
              opacity: {
                opacity = 0.8
                if (extra_data.data.shown_trick.includes(modelData)) {
                  opacity = 0;
                }
              }
            }
            showDetail: true
            known: false
            Component.onCompleted: {
              if (extra_data.data.owner === Self.id ||
                extra_data.data.shown_trick.includes(modelData)) {
                known = true;
                const data = lcall("GetCardData", modelData);
                setData(data);
              }
            }
          }
        }
      }
      Repeater {
        model: 3 - extra_data.data.trick.length
        Rectangle {
          color: "#1D1E19"
          width: 97
          height: 134
        }
      }
    }
    
    RowLayout {
      Rectangle {
        color: "#6B5D42"
        width: 20
        height: 120
        radius: 5

        Text {
          anchors.fill: parent
          width: 20
          height: 120
          text: "备用区"
          color: "#C4B454"
          font.family: fontLibian.name
          font.pixelSize: 18
          style: Text.Outline
          wrapMode: Text.WordWrap
          verticalAlignment: Text.AlignVCenter
          horizontalAlignment: Text.AlignHCenter
        }
      }
      Repeater {
        model: extra_data.data.equip
        Rectangle {
          color: "#1D1E19"
          width: 97
          height: 134
          CardItem {
            anchors.centerIn: parent
            showDetail: true
            Component.onCompleted: {
              const data = lcall("GetCardData", modelData);
              setData(data);
            }
          }
        }
      }
      Repeater {
        model: 2 - extra_data.data.equip.length
        Rectangle {
          color: "#1D1E19"
          width: 97
          height: 134
        }
      }
    }
  }
}
